<template>
  <div class="main">
    <el-container>

      <!--      侧边栏-->
      <el-aside class="left" :width="asideWidth">
        <div class="left-top">
          <img class="left-top-img" width="50px" src="@/assets/logo.png">
        </div>
        <div class="left-bottom">
          <el-menu :collapse="isCollapse" :collapse-transition="false" style="border: none" router>
            <el-menu-item index="/First"><i class="el-icon-s-promotion"></i>
              <sapn class="left-bottom-item">
                <span>首页</span>
              </sapn>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-star-off"></i>
                <span>商品新闻展示</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/test01">新闻信息</el-menu-item>
                <el-menu-item index="/News">水果销售</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2" v-if="user.role === '管理员'">
              <template slot="title">
                <i class="el-icon-success"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/drink">系统日志</el-menu-item>
                <el-menu-item index="/Booking">系统公告</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3" v-if="user.role === '管理员'">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/about">用户列表</el-menu-item>
<!--                <el-menu-item index="/Chart01">趋势图测试</el-menu-item>-->
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>

      <el-container>

        <!--        头部区域-->
        <el-header class="head">
          <div class="head-1">
            <div class="header-left">
              <i :class="changeAnNiu" @click="handleCollapse"></i>
            </div>
            <div class="MianBao">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/First' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>
          <div class="head-2">
            <div>
            <el-dropdown>
              <span class="el-dropdown-link">
                <div class="header-right">
                    <i class="el-icon-magic-stick"></i>
                </div>
              </span>
              <el-dropdown-menu router slot="dropdown">
                <el-dropdown-item @click.native="PassWordView">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="Test_Test">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="LoginOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </div>
            <div class="head-1-1">
            <el-image
                style="border-radius: 50%; margin-top: 2px; margin-left: 10px" width="10px" height="10px"
                :src="user.avatar"
                >
            </el-image>
          </div>
            <div>
              <span style="margin-left: 10px; font-family: '楷体'; font-size: 20px">欢迎{{user.name}}</span>
            </div>
          </div>
        </el-header>

        <!--        主体区域-->
        <el-main style="background: rgba(242,243,243,0.68)">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'HomeView',
  data() {
    return {
      url:'',
      user: JSON.parse(localStorage.getItem('user11') || '{}'),
      isCollapse: false,
      asideWidth: '240px',
      changeAnNiu: 'el-icon-s-fold',
    }
  },
  mounted() {

  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      // 切换 changeAnNiu 的值
      this.changeAnNiu = this.changeAnNiu === 'el-icon-s-fold' ? 'el-icon-s-unfold' : 'el-icon-s-fold';
      // 根据 isCollapse 的值设置 asideWidth
      this.asideWidth = this.isCollapse ? '60px' : '240px';
    },
    PassWordView() {
      this.$router.push('/PassWordView')
    },
    Test_Test() {
      //跳转到Test页面
      this.$router.push('/test')
    },
    LoginOut() {
      this.$confirm('确定退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认退出，执行退出逻辑
        this.$router.push('/')
      //  清空Tkoen
        localStorage.removeItem('token')
        this.$message.success('退出成功')
      }).catch(() => {
        // 取消退出，执行取消逻辑
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    }
  }
}
</script>

<style scoped>
/* 你的样式 */
.left {
  width: 200px;
  min-height: 100vh;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.head-1-1 {
  width: 50px;
  height: 50px;
  margin-top: 5px;
}

.head-1 {
  display: flex;
  align-items: center;
}

.left-top {
  width: 100%;
  height: 60px;
  background-color: rgba(1, 35, 27, 0.71); /* 更改为浅灰色并设置透明度 */
  display: flex;
  align-items: center; /* 修改为 align-items 以正确垂直居中 */
  justify-content: center;
  border: 1px solid #ccc; /* 添加边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* 添加阴影效果 */
  border-radius: 8px;
}

.head-2 {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.header-right {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  justify-content: center;
  background-color: rgba(60, 232, 226, 0.76);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.header-left {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  justify-content: center;
  background-color: rgba(252, 219, 92, 0.76);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.head {
  background-color: rgba(243, 237, 238, 0.94);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.el-aside {
  transition: width .4s;
}
</style>